<template>
  <div>
    <nav1></nav1>
    <div class="banner">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        width="100%"
      >
        <van-swipe-item v-for="(l, i) in banner" :key="i">
          <van-image width="100%" height="8.6rem" :src="l.image_url" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="cate_List">
      <div class="cate">
        <img
          src="https://oss.flowerplus.cn/flower_periphery_image/20210128/16118080645393.png"
        />
      </div>
      <div class="cate">
        <img
          src="https://oss.flowerplus.cn/flower_periphery_image/20210129/16118911944093.png"
        />
      </div>
    </div>
    <div class="activity_list activity_list_2">
      <div class="activity">
        <img
          src="https://oss.flowerplus.cn/forest_banner_image/20210129/16118912295156.png"
        />
      </div>
      <div class="activity">
        <img
          src="https://oss.flowerplus.cn/forest_banner_image/20210301/16145975303261.png"
        />
      </div>
    </div>
    <div class="newbox">
      <div class="title1">
        <span>新品推荐</span>
        <p class="swiper_num">
          <span style="color: red">{{ current }}</span
          >/7
        </p>
      </div>
      <div style="width: 100%">
        <van-swipe
          class="my-swipe"
          width
          :show-indicators="false"
          @change="onchange"
        >
          <van-swipe-item v-for="(l, i) in new_product" :key="i">
            <van-image width="100%" height="100%" :src="l.image_url" />
            <div class="text">
              <p class="van-ellipsis">{{ l.title }}</p>
              <p class="van-ellipsis">{{ l.subtitle }}</p>
              <p>￥{{ l.price }}</p>
              <p></p>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="hot">
      <div class="title2">
        <span>热卖专区</span>
      </div>
      <div class="title5">
        <div class="main">
          <li v-for="(l, i) in hot" :key="i">
            <img :src="l.image_url" alt="" />
            <p>{{ l.title }}</p>
            <p class="van-ellipsis" style="color: #999999">{{ l.sub_title }}</p>
            <p>￥{{ l.price }}</p>
          </li>
        </div>
      </div>
    </div>

    <div class="mustbuy">
      <div class="title2">
        <span>经典必买</span>
      </div>
      <div class="title5">
        <div class="main">
          <li v-for="(l, i) in mustbuy" :key="i">
            <img :src="l.image_url" alt="" />
            <p class="van-ellipsis" >{{ l.title }}</p>
            <p class="van-ellipsis" style="color: #999999">{{ l.sub_title }}</p>
            <p>￥{{ l.price }}</p>
          </li>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      banner: "",
      new_product: "",
      current: 1,
      hot: "",
      mustbuy: "",
    };
  },
  methods: {
    onchange(index) {
      this.current = index + 1;
    },
  },
  mounted() {
    axios({
      method: "get",
      url: "http://localhost:3200/data/",
    }).then((res) => {
      var data = res.data.allmonth;
      this.banner = res.data.allmonth.banner;
      this.new_product = res.data.allmonth.new_product;
      this.hot = res.data.allmonth.hot_product;
      this.mustbuy = res.data.allmonth.classic_product;
    });
  },
};
</script>
<style lang="scss" scoped>
.cate_List {
  margin-top: 0.5rem;
  padding: 0 0.4rem;
  height: 2.55rem;
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  img {
    width: 100%;
    height: 100%;
  }
}
.cate:first-child {
  width: 206px;
  height: 127px;
  overflow: hidden;
}
.cate:last-child {
  width: 118px;
  height: 127px;
  overflow: hidden;
}
.activity_list {
  margin-top: 0.1rem;
  padding: 0 0.4rem;
  height: 78px;
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
  .activity {
    width: 164px;
    flex: 1;
  }
}

.newbox {
  width: 100%;
  height: 302px;

  margin-top: 40px;
  .title1 {
    margin-bottom: 20px !important;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    // margin-bottom: 0.31rem;
    box-sizing: border-box;
    margin-bottom: 0.06rem;
    height: 0.5rem;
    font-size: 0.36rem;
    font-weight: bold;
    color: #333333;
    line-height: 0.5rem;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    span {
      font-weight: 1000;
      font-size: 19px;
    }
  }
  .text {
    padding: 15px 20px;
    & p:nth-child(1) {
      font-size: 14px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
    }
    & p:nth-child(2) {
      font-size: 14px;
      font-weight: 600;
      color: rgba(51, 51, 51, 0.5);
    }
    & p:nth-child(3) {
      font-size: 14px;
      font-weight: 700;
      color: #ff6269;
    }
  }
}
.hot,
.mustbuy {
  margin-top: 30px;

  .title2 {
    // margin-bottom: 14px !important;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    box-sizing: border-box;
    margin-bottom: 0.06rem;
    height: 0.5rem;
    font-size: 0.36rem;
    font-weight: bold;
    color: #333333;
    line-height: 0.5rem;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;

    span {
      font-weight: 1000;
      font-size: 19px;
    }
  }
}
.title5 {
  margin-bottom: 0.4rem;
  margin-top: 20px;
  text-align: center;
  padding: 0 0.4rem;
  box-sizing: border-box;
  h4 {
    width: 100%;
    height: 0.48rem;
    font-size: 0.42rem;
    font-weight: 800;
    color: #312f2e;
    line-height: 0.48rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
  }
  ul {
    display: flex;
    width: 100%;
    justify-content: space-between;
    span {
      &:nth-child(2) {
        color: rgba(255, 98, 105, 1);
      }
      &:nth-child(1) {
        color: #888584;
      }
    }
  }
  .main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    li {
      width: 50%;
      p {
        margin: 8px auto;
      }
      img {
        width: 160px;
        height: 214px;
      }
    }
  }
}
</style>